<template>
    <div class="rianCounty">
        <fan-chart class="fanChart"/>        
        <div class="rank">
            <h3>各乡镇近24h累计降雨量排名</h3>
            <ul class="top3">
                <li v-for="(item,index) of top3" :key="index" :style="{'background-image':'url(../../../../../static/images/actuallyMonitor/rankBg/largeRed.png)'}">
                    <span style="position:absolute;color:#fff;left:.8rem;top:.5rem;">{{index+1}}</span>
                    <span style="font-size:2.2rem;display:block;margin:1.5rem 0 1rem 0;">{{item.value}}℃</span>
                    <span style="color:#fff">{{item.name}}</span>
                </li>
            </ul>
            <ul class="surplus">
                <li v-for="(item,index) of surplus" :key="index" :style="{'background-image':'url(../../../../../static/images/actuallyMonitor/rankBg/'+item.background+'.png)'}">
                    <span style="position:absolute;color:#fff;left:.8rem;top:.5rem;">{{index+4}}</span>
                    <span style="color:#fff;display:block;margin:.8rem 0 .8rem 0">{{item.name}}</span>
                    <span style="font-size:1.2rem;">{{item.value}}℃</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import fanChart from './branch/fanChart'
export default {
    props:['pageType'],// to textInfo
    components:{
        fanChart,
    },
    data(){
        return{
            rankes:[
                {name:'大同镇',value:16,background:''},
                {name:'乾潭镇',value:15,background:''},
                {name:'三都镇',value:14,background:''},
                {name:'藤桥镇',value:13,background:'red'},
                {name:'泽雅镇',value:12,background:'red'},
                {name:'大门镇',value:11,background:'orange'},
                {name:'塘下镇',value:10.2,background:'orange'},
                {name:'陶山镇',value:10.1,background:'orange'},
                {name:'桐浦镇',value:9.2,background:'orange'},
                {name:'鹤盛镇',value:9.2,background:'orange'},
                {name:'山门镇',value:9.2,background:'orange'},
                {name:'雁荡镇',value:9.2,background:'yellow'},
                {name:'泗溪镇',value:9.2,background:'yellow'},
                {name:'赤溪镇',value:9.2,background:'yellow'},
                {name:'什阳镇',value:9.2,background:'yellow'},
                {name:'仙溪镇',value:9.2,background:'green'},
                {name:'碧莲镇',value:9.2,background:'green'},
                {name:'宜山镇',value:9.2,background:'green'},
                {name:'淡溪镇',value:9.2,background:'green'},
                {name:'枫林镇',value:9.2,background:'green'},
                {name:'玉壶镇',value:9.2,background:'green'},
                {name:'巨屿镇',value:9.2,background:'sky'},
                {name:'西坑镇',value:9.2,background:'sky'},
                {name:'彭溪镇',value:9.2,background:'sky'},
                {name:'三魁镇',value:9.2,background:'sky'},
            ],
            top3:[],
            surplus:[],
        }
    },
    methods:{
        dataFilter(){
            this.top3 = this.rankes.slice(0,3)
            this.surplus = this.rankes.slice(3,this.rankes.length)
        }
    },
    created(){
        this.dataFilter()
    }
}
</script>

<style lang="scss" scoped>
    .rianCounty{
        width:100%;
        height:100%;
        display:flex;
        flex-direction: column;
        .fanChart{
            height:14rem;
        }
        .rank{
            flex:1;
            margin-top:1rem;
            background-image: url('../../../../static/images/actuallyMonitor/bar.png');
            background-repeat: no-repeat;
            background-size: 100% 100%;
            h3{
                line-height:2.4rem;
                letter-spacing: .2rem;
                font-size:1.2rem;
                height:2.4rem;
                border:.1rem solid rgba(48, 138, 199, 0.5);
                box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
                width:100%;
                margin-bottom:.5rem;
                text-align:left;
                padding-left:1rem;
                box-sizing: border-box;
            }
            .top3{
                display:flex;
                flex-wrap: wrap;
                padding:.8rem 0;
                border-bottom:1px dashed #7FC7EA;
                li{
                    position: relative;
                    width:32%;
                    background-repeat: no-repeat;
                    background-size:100% 100%;
                    height:7.2rem;
                    margin:0 2% 2% 0;
                    text-align:center;
                    &:nth-child(3n){
                        margin-right: 0;
                    }
                }
            }
            .surplus{
                display:flex;
                flex-wrap: wrap;
                margin-top:.8rem;
                height:34.3rem;
                overflow: auto;
                li{
                    width:32%;
                    background-repeat: no-repeat;
                    background-size:100% 100%;
                    height:4.2rem;
                    margin:0 2% 2% 0;
                    text-align:center;
                    position: relative;
                    &:nth-child(3n){
                        margin-right: 0;
                    }
                }
            }
        }
    }
</style>